<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="内容">
            <el-row type="flex" class="editformitem" v-for="(item, index) in obj.tableData.colums" :key="'selecty' + index">
                <el-col :span="8" class="editlabel">
                    <span>切换菜单</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model="item.text" placeholder="输入按钮名称" />
                    <br>
                    <el-select v-model="item.id" filterable clearable placeholder="请选择组件" size="mini" multiple>
                        <el-option v-for="card in plugsDataArray" :key="card.id"
                            :label="card.asName ? card.asName : card.name" :value="card.id" />
                    </el-select>
                    <i class="el-icon-error zzlistbtn" v-if="index > 0"
                        @click="deleteDataYinfo(obj.tableData.colums, index)"></i>
                </el-col>
            </el-row>
            <div class="addybtn" @click="addDataYinfo(obj.tableData.colums)">
                + 新增按钮
            </div>
        </el-tab-pane>
        <el-tab-pane label="样式">
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>排列</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-radio-group v-model="obj.tableData.menu.position">
                        <el-radio label="heng">横排</el-radio>
                        <el-radio label="shu">竖排</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>边距</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.menu.margin" class="miniinput" type="number"
                        style="width:82px;" />px
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>默认样式</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.menu.fontSize" class="miniinput" type="number"
                        style="width:82px;" />
                    <el-color-picker v-model="obj.tableData.menu.color" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj.tableData.menu, 'color', $event)" />
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': obj.tableData.menu.fontWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', obj.tableData.menu, 'fontWeight')"><i
                                class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': obj.tableData.menu.fontStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', obj.tableData.menu, 'fontStyle')"><i
                                class="iconfont icon-zitixieti"></i></div>
                    </div>
                    <br>
                    <span style="margin-right:10px;">背景</span>
                    <el-color-picker v-model="obj.tableData.menu.backgroundColor" size="small" show-alpha
                        :predefine="predefineColors" popper-class="mycolorview"
                        @active-change="setColorChange(obj.tableData.menu, 'backgroundColor', $event)" />
                    <img-store v-model="obj.tableData.menu.backgroundImage" style="margin-left:10px;display: inline-block;">
                        <el-button size="mini" slot="button">背景图片</el-button>
                    </img-store>
                    <!-- style="margin:0 10px;" -->
                    <br>
                    <span style="margin-right:10px;">边框</span>
                    <input v-model.number="obj.tableData.menu.borderWidth" class="miniinput" type="number"
                        style="width:50px;" />
                    <el-color-picker v-model="obj.tableData.menu.borderColor" size="small" show-alpha
                        :predefine="predefineColors" popper-class="mycolorview"
                        @active-change="setColorChange(obj.tableData.menu, 'borderColor', $event)" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>选中样式</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.activeMenu.fontSize" class="miniinput" type="number"
                        style="width:82px;" />
                    <el-color-picker v-model="obj.tableData.activeMenu.color" size="small" show-alpha
                        :predefine="predefineColors" popper-class="mycolorview"
                        @active-change="setColorChange(obj.tableData.activeMenu, 'color', $event)" />
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': obj.tableData.activeMenu.fontWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', obj.tableData.activeMenu, 'fontWeight')"><i
                                class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': obj.tableData.activeMenu.fontStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', obj.tableData.activeMenu, 'fontStyle')"><i
                                class="iconfont icon-zitixieti"></i></div>
                    </div>
                    <br>
                    <span style="margin-right:10px;">背景</span>
                    <el-color-picker v-model="obj.tableData.activeMenu.backgroundColor" size="small" show-alpha
                        :predefine="predefineColors" popper-class="mycolorview"
                        @active-change="setColorChange(obj.tableData.activeMenu, 'backgroundColor', $event)" />
                    <img-store v-model="obj.tableData.activeMenu.backgroundImage"
                        style="margin-left:10px;display: inline-block;">
                        <el-button size="mini" slot="button">背景图片</el-button>
                    </img-store>
                    <br>
                    <span style="margin-right:10px;">边框</span>
                    <input v-model.number="obj.tableData.activeMenu.borderWidth" class="miniinput" type="number"
                        style="width:50px;" />
                    <el-color-picker v-model="obj.tableData.activeMenu.borderColor" size="small" show-alpha
                        :predefine="predefineColors" popper-class="mycolorview"
                        @active-change="setColorChange(obj.tableData.activeMenu, 'borderColor', $event)" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>自动切换</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-checkbox v-model="obj.tableData.menu.isAuto"></el-checkbox>
                    <template v-if="obj.tableData.menu.isAuto">
                        <input type="number" v-model.number="obj.tableData.menu.speed" placeholder="切换间隔"
                            style="width: 80px;margin:0 10px;" />
                        <span>秒</span>
                    </template>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
import ImgStore from "@/components/ImgStore";

export default {
    name: "TabSwitchForm",
    components: {
        BoxForm: () => import('../mixin/BoxForm.vue'),
        Gradient: () => import('@/components/Gradient/index.vue'),
        ImgStore
    },
    props: {
        predefineColors: Array,
        obj: Object,
        setFontStyle: Function,
        setColorChange: Function,
        plugsDataArray: Array,
    },
    model: {
        prop: "obj",
        event: "change",
    },
    methods: {
        addDataYinfo(item) {
            item.push({ id: [], text: "", active: false, });
        },
        deleteDataYinfo(item, index) {
            item.splice(index, 1);
        },
    }
}
</script>
